<template>
    <div>
      <my-head>
      </my-head>

      <div>
        <el-row   style="width:80%;margin-left: 8%;margin-top: 5%">

          <el-card v-for="(order,index) in order" :key="order">
            <div slot="header" class="clearfix" style="margin-right: 60%">
              <span style="font-size: 25px">确认订单信息</span>
              <span style="font-size: 15px"> 请在2小时内完成支付，否则订单会被自动取消</span>
            </div>

            <el-row style="width: 10%">
              <h3>购买课程</h3>
            </el-row>
            <el-row v-for="(orderDetail,index) in order.qfOrderDetailList" :label="course" :key="index" style="margin-top: 10px">
              <el-col :span="3" style="width: 50%">
                <el-card :body-style="{ padding: '1px' }">
                  <img style="width: 100%;height: 250px"  :src="orderDetail.qfCourse.coursePic" class="image">
                </el-card>
              </el-col>
              <el-col :span="10" style="width: 50%">
                <el-card :body-style="{ padding: '1px' }">
                  <div slot="header" class="clearfix">
                    <span style="font-size: 18px">{{orderDetail.qfCourse.courseName}}</span>
                  </div>
                  <el-row>
                    <el-col style="width: 20%">
                      评分：
                    </el-col>
                    <el-col style="width: 50%">

                      <el-rate
                        v-model="value"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                      </el-rate>
                    </el-col>
                  </el-row>

                  <el-row style="margin-top: 63px">
                    <el-col style="width: 20%">
                      价格
                    </el-col>
                    <el-col style="width: 50%">
                      ￥{{orderDetail.qfCourse.pay}}
                    </el-col>
                  </el-row>
                  <el-row style="margin-top: 63px">
                    <el-col style="width: 20%">
                      类型
                    </el-col>
                    <el-col style="width: 50%">
                      永久可看
                    </el-col>
                  </el-row>

                </el-card>
              </el-col>
            </el-row>

            <el-button @click="orderpay(order.orderId)" type="success">点击支付！</el-button>
            <el-button @click="cancelPay(order.orderId)" type="danger">取消支付！</el-button>
          </el-card>
        </el-row>

        <div v-html="alipayWap" ref="alipayWap"></div>
      </div>

      <my-footer>
      </my-footer>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "",
        data(){
          return{
            user:{},
            value: 5,
            order:[

            ],
            payReq:{},
            alipayWap:""

          }
        },
        methods:{
          //根据课程id查询课程详细信息
          findCourseById:function () {
            this.$axios.post("/qflive-order/order/findOrderByUserId",{orderstatus:1}).then(res=>{
              if (res.data.code==1){

                this.order = res.data.data;

              }
            })
          },
          findUserByToken(){
            this.$axios.post("/user/findUserByToken").then(res => {
              console.log(res.data)
              this.validate = res.data.code==1;
              if (res.data.code==1) {

                this.user = res.data.data;
                console.log(this.user)
              }
              if (res.data.code == 0) {
                this.$router.push("/").catch(data => {  })
              }
            })
          },
          cancelPay(orderid){
              this.$axios.post("/order/cancelPay",{orderid:orderid}).then(res=>{
                if (res.data.code==1){
                  const h = this.$createElement;
                  this.$message({
                    message: h('p', null, [
                      h('span', null, '取消订单 '),
                      h('i', { style: 'color: teal' }, '成功')
                    ])
                  });
                  this.findCourseById();
                }else{
                  const h = this.$createElement;
                  this.$message({
                    message: h('p', null, [
                      h('span', null, '取消订单 '),
                      h('i', { style: 'color: teal' }, '失败')
                    ])
                  });
                }
              })
          },
          orderpay(orderid){

            this.$axios.post("/qflive-pay/pay/alipay",{orderid:orderid}).then(res=>{
              //console.log()

              this.alipayWap = res.data.data;
              console.log(res.data.data)
              //前台发起请求
              //debugger;
              this.$nextTick(() => {
                this.$refs.alipayWap.children[0].submit()
              })
            })
          }

        },
        mounted(){
            //this.id = this.$route.params.productid;
           // this.findUserByToken();
            this.findCourseById();
        }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  code {
    font-family: monospace;
  }
</style>
